<template>
	<view>
		<div class="total">
			<span style="font-size:26rpx;margin-left: 24rpx;">实验进度：</span>
			<span style="font-size:32rpx; color: #3771FB;font-weight:bold;">{{numObj3.completeNum}}</span>
			<span style="font-size:26rpx;">/{{numObj3.arrL}}</span>

			<view class='flex flex-wrap align-center'>
				<view class='flex benben-progress-bar MyPortrayal_fd1_7_c1_c0_c1_c0'>
					<view class='benben-progress-bar-center MyPortrayal_progress1_fd1_7_c1_c0_c1_c0'
						:style="{width: (numObj3.completeNum / numObj3.arrL) * 100+'%'}">
					</view>
				</view>
				<view class="number">
					{{ numObj3.arrL ? ((numObj3.completeNum / numObj3.arrL) * 100).toFixed(2) : '0.00' }}%
				</view>
			</view>
		</div>
		<ExperimentList :course="course" @myEvent="handleChildData3"></ExperimentList>
	</view>
</template>

<script>
	import ExperimentList from "./experimentList.vue"
	export default {
		components: {
			ExperimentList
		},
		data() {
			return {
				course:'',//课程id
				"numObj3": {
					completeNum: 0,
					arrL: 0
				}, //实验进度
				list:[],
			}
		},
		onLoad(option) {
			this.course=option.course
			console.log(this.course)
			this.getjf6f236d491017Func()
		},
		methods: {
			//APP接口-查看课程详情
			async getjf6f236d491017Func() {
				//请求方法
				//数据验证
			
				let datalist = await this.$api.get(global.apiUrls.post68ca2decb8b2c, {
					aid: this.course
				});
			
				if (datalist.data.code != 1) { 
					this.$message.info(datalist.data.msg);
					return
				}
				let infolist = datalist.data;
				// this.list = infolist.data
			
			},
			//实验
			handleChildData3(data) {
				this.numObj3.completeNum = data.filter(item => item.trainings_status?.trainings_status == 3)
					.length || 0
				this.numObj3.arrL = data.length
			},
		}
	}
</script>

<style lang="scss">
	.total {
		// width: 100%;
		height: 88rpx;
		background: #F4F8FD;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		border: 1rpx solid rgba(0, 0, 0, 0);
		display: flex;
		align-items: center;
		margin: 30rpx 24rpx 32rpx 24rpx;
	}

	.MyPortrayal_fd1_7_c1_c0_c1_c0 {
		background: #fff;
		width: 300rpx;
		height: 28rpx;
		border-radius: 14rpx;
		background-size: 100% auto;
		margin-left: 44rpx;

		.MyPortrayal_progress1_fd1_7_c1_c0_c1_c0 {
			background: linear-gradient(90deg, #6E9CFF 0%, #145EFD 100%);
			border-radius: 14rpx;
		}


	}

	.number {
		font-weight: 500;
		font-size: 20rpx;
		color: #145EFD;
		line-height: 28rpx;
		font-weight: 500;
		margin-left: 10rpx;
	}
</style>
